<script setup lang="ts">
import roomMessage from '@/hooks/roomMessageHooks'
import { UserInfoItemModel } from '@/models/roomMessageModels'
import { StatisticsTab } from '@/models/sys'
import NotData from '@/components/NotData.vue'
import { avatarUrl } from '@/utils'

const props = defineProps<{
  id: number
  tabPosition: number
  isShowMenuDialog: boolean
}>()

const { ...callback } = roomMessage()
const listData = ref<UserInfoItemModel[]>([])
const paging = ref()

async function query(page: number, per_page: number) {
  if (props.id !== undefined) {
    const listData = await callback.repliedUsers(props.id, page, per_page)
    paging.value.complete(listData)
  }
}

watch(
  () => props.tabPosition,
  () => {
    refresh()
  },
)

watch(
  () => props.isShowMenuDialog,
  () => {
    if (props.isShowMenuDialog) {
      refresh()
    }
  },
)

function refresh() {
  if (StatisticsTab.Replied === props.tabPosition) {
    paging.value.refresh()
  }
}
</script>

<template>
  <view class="mt-4">
    <view class="scroll-views">
      <z-paging
        ref="paging"
        loading-more-no-more-text="没有更多了"
        v-model="listData"
        @query="query"
        :fixed="false"
        :default-page-size="10"
      >
        <template #empty>
          <NotData text="暂无数据"></NotData>
        </template>
        <view v-for="(item, index) in listData" :key="index">
          <view class="round-corners linear-hor mt-2 ml-4 mr-4">
            <view>
              <wd-img :src="avatarUrl(item.avatar)" :width="40" :height="40" :radius="6"></wd-img>
            </view>
            <span style="width: 24rpx" />
            <view class="linear-vertical">
              <wd-text :text="item.nickname" color="#2B2F36" size="16" :lines="1"></wd-text>

              <wd-text :text="item.content" :lines="1" color="#9FA3AA" size="12"></wd-text>
            </view>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<style scoped lang="scss">
.round-corners {
  background: white;
  border-radius: 16rpx;
}

.linear-hor {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
}

.linear-vertical {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.spacer {
  flex-grow: 1;
}

.scroll-views {
  height: calc(1080rpx - 228rpx);
}
</style>
